<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>09.react渲染dom的条件判断</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      class Template extends React.Component {
        constructor() {
          super()
          this.state = {
            isShow: true
          }
        }

        render() {
          let { isShow } = this.state
          // let showText = isShow ? (<div>我是文本</div>) : null; // 实现setState和这里render里的逻辑环形调用,注意：null是不会显示的
          let showText = isShow && <div>我是文本</div>
          return (
            <div>
              {/* 注意这种写法是不对的，因为isShow更改的是本地变量，没有更改到this.state.isShow,况且还没有用setState触发视图更新呢 */}
              {/* <button onClick={isShow=!isShow}>{isShow?'隐藏':'显示'}</button> */}
              <button
                onClick={() => {
                  this.setState({
                    isShow: !this.state.isShow
                  })
                }}
                style={{ cursor: "pointer" }}
              >
                {isShow ? "隐藏文本" : "显示文本"}
              </button>
              {showText}
              <span style="{{display:isShow?'block':'none'}}">我是文本2</span>
            </div>
          )
        }
      }

      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<Template />)
    </script>
  </body>
</html>
